<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手风琴效果(上下划拉)</title>
    <script src="jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .list{
            width: 210px;
        }
        li{
            list-style: none;
            background: rebeccapurple;
            text-align: center;
        }
        .list ul li a{
            /* position: relative; */
            display: block;
            height: 36px;
            line-height: 36px;
            font-weight: bold;
        }
        a{
            text-decoration: none;
            color: aliceblue;
        }
        /* 链接未点击之前和点击之后的样式 */
        a:link{
            color: aqua;
        }
        /* 鼠标按下的瞬间a标签的样式 */
        a:active{
            color: brown;
        }
        ul.hide{
            display: none;
        }
        /* .back{
            background: url(0.jpeg) no-repeat 180px center;
        } */
        .list ul li ul li {
        	background-color:#d6e6f1;
        	border-color:#6196bb;
        }
        .list ul li ul li ul li{
        	background-color:black;
        	border-color:#6196bb;
        }
    </style>
</head>
<body>
    <div class="list">
        <ul>
            <li>
                <a href="###" class="active">中国文联美术艺术中心</a>
                <ul class="hide">
                    <li><a href="###">综合部</a></li>
                    <li><a href="###">大型活动部</a></li>
                    <li><a href="###">展览部</a></li>
                    <li><a href="###">以为会工作部</a></li>
                    <li><a href="###">信息资源不</a></li>
                    <li><a href="###">刷给你年展</a></li>
                </ul>
            </li>
            <li>
                <a href="###" class="active">组织机构</a>
                <ul class="hide">
                    <li>
                        <a href="###" class="active">没写机关</a>
                        <ul class="hide">
                            <li><a href="###">十分感激哦啊结果</a></li>
                            <li><a href="###">十分感激哦啊结果</a></li>
                            <li><a href="###">十分感激哦啊结果</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="###" class="active">艺术中心</a>
                        <ul class="hide">
                            <li><a href="###">如俄国i哦额</a></li>
                            <li><a href="###">如俄国i哦额</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="###" class="active">杂志社</a>
                        <ul class="hide">
                            <li><a href="###">再度v规划</a></li>
                            <li><a href="###">再度v规划</a></li>
                            <li><a href="###">再度v规划</a></li>
                            <li><a href="###">再度v规划</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="###" class="active">哈哈哈巴啦啦</a>
                <ul class="hide">
                    <li><a href="###">巴啦啦小魔仙</a></li>
                    <li><a href="###">巴啦啦小魔仙</a></li>
                    <li><a href="###">巴啦啦小魔仙</a></li>
                    <li><a href="###">巴啦啦小魔仙</a></li>
                    <li><a href="###">巴啦啦小魔仙</a></li>
                    <li><a href="###">巴啦啦小魔仙</a></li>
                    <li><a href="###">巴啦啦小魔仙</a></li>
                </ul>
            </li>
        </ul>
    </div>


    <script>
        // 当文档被加载时触发函数
        $(function(){
            $('.active').click(function(){
                // 判断ul是否隐藏，如果是隐藏的就让它显示
                if($(this).siblings("ul").css("display")==="none"){
                    $(this).siblings("ul").slideDown(100);
                }
                // 如果不是隐藏的，就让它隐藏
                else{
                    $(this).siblings("ul").slideUp(100);
                }
            });
        })
    </script>
</body>
</html>